import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { toast } from '@/lib/toast-with-audio';
import DetailDrawer, { DetailItem } from '@/components/DetailDrawer';

interface TodoItem {
  id: string;
  type: 'requirement' | 'task' | 'bug';
  title: string;
  priority: 'low' | 'medium' | 'high' | 'urgent';
  status: 'pending' | 'in-progress' | 'completed';
  deadline?: string;
  assignee: string;
  project: string;
  createdAt: string;
  code: string;
  progress: number;
}

interface MentionComment {
  id: string;
  type: 'requirement' | 'task' | 'bug' | 'article';
  targetId: string;
  targetTitle: string;
  content: string;
  author: string;
  createdAt: string;
  likes: number;
  mentioned: boolean; // 是否@我
  status?: 'pending' | 'resolved'; // 评论状态（仅对需求/任务/缺陷有效）
}

interface PerformanceEvaluation {
  id: string;
  period: 'month' | 'quarter' | 'year';
  periodName: string;
  finalScore: number;
  maxScore: number;
  evaluators: {
    id: string;
    name: string;
    role: string;
    score: number;
    comment: string;
    evaluatedAt: string;
  }[];
  averageScore: number;
  rank: number;
  totalParticipants: number;
  createdAt: string;
  breakdown: {
    quality: number;
    efficiency: number;
    collaboration: number;
    innovation: number;
    kpi: number;
    assessment: number;
    feedback: number;
    contribution: number;
  };
  // 自动考评数据
  autoEvaluation?: {
    completedTasks: number;
    totalTasks: number;
    completedRequirements: number;
    totalRequirements: number;
    fixedBugs: number;
    totalBugs: number;
    onTimeRate: number;
    qualityScore: number;
    efficiencyScore: number;
    autoScore: number;
    evaluationProcess: Array<{
      step: string;
      description: string;
      score: number;
      timestamp: string;
    }>;
  };
}

const Workbench: React.FC = () => {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState<'todo' | 'knowledge' | 'performance'>('todo');
  
  // 待办事项视图模式
  const [todoViewMode, setTodoViewMode] = useState<'kanban' | 'list'>('kanban');
  
  // 待办事项筛选
  const [todoFilter, setTodoFilter] = useState<'all' | 'requirement' | 'task' | 'bug'>('all');
  
  // 抽屉组件状态
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [selectedItem, setSelectedItem] = useState<DetailItem | null>(null);
  
  // 模拟数据
  const [todoItems, setTodoItems] = useState<TodoItem[]>([
    {
      id: '1',
      type: 'requirement',
      code: 'REQ-001',
      title: '用户登录功能优化',
      priority: 'high',
      status: 'pending',
      deadline: '2024-01-15',
      assignee: '张三',
      project: '电商系统',
      createdAt: '2024-01-10',
      progress: 0
    },
    {
      id: '2',
      type: 'task',
      code: 'TASK-001',
      title: '数据库性能调优',
      priority: 'medium',
      status: 'in-progress',
      deadline: '2024-01-20',
      assignee: '李四',
      project: '后台管理系统',
      createdAt: '2024-01-08',
      progress: 50
    },
    {
      id: '3',
      type: 'bug',
      code: 'BUG-001',
      title: '首页加载缓慢问题',
      priority: 'urgent',
      status: 'pending',
      deadline: '2024-01-12',
      assignee: '王五',
      project: '前端项目',
      createdAt: '2024-01-11',
      progress: 0
    }
  ]);

  const [mentionComments, setMentionComments] = useState<MentionComment[]>([
    {
      id: '1',
      type: 'requirement',
      targetId: 'req-001',
      targetTitle: '用户登录功能优化',
      content: '@我 请帮忙评审一下这个需求的实现方案',
      author: '产品经理',
      createdAt: '2024-01-10 14:30',
      likes: 2,
      mentioned: true,
      status: 'pending'
    },
    {
      id: '2',
      type: 'task',
      targetId: 'task-001',
      targetTitle: '数据库性能调优',
      content: '@我 这个任务需要你的技术指导',
      author: '开发工程师',
      createdAt: '2024-01-09 10:15',
      likes: 1,
      mentioned: true,
      status: 'pending'
    },
    {
      id: '3',
      type: 'bug',
      targetId: 'bug-001',
      targetTitle: '首页加载缓慢问题',
      content: '@我 这个Bug需要你协助排查',
      author: '测试工程师',
      createdAt: '2024-01-11 09:20',
      likes: 0,
      mentioned: true,
      status: 'pending'
    },
    {
      id: '4',
      type: 'article',
      targetId: 'art-001',
      targetTitle: 'React最佳实践指南',
      content: '这篇文章对我帮助很大，特别是关于性能优化的部分。',
      author: '技术总监',
      createdAt: '2024-01-08 16:45',
      likes: 5,
      mentioned: false
    }
  ]);

  // 自动考评计算函数
  const calculateAutoEvaluation = (periodName: string) => {
    // 模拟基于任务、需求、bug完成情况的自动考评
    const completedTasks = Math.floor(Math.random() * 15) + 10;
    const totalTasks = completedTasks + Math.floor(Math.random() * 5);
    const completedRequirements = Math.floor(Math.random() * 8) + 5;
    const totalRequirements = completedRequirements + Math.floor(Math.random() * 3);
    const fixedBugs = Math.floor(Math.random() * 20) + 15;
    const totalBugs = fixedBugs + Math.floor(Math.random() * 8);
    
    const onTimeRate = Math.min(100, Math.floor(Math.random() * 20) + 80);
    const qualityScore = Math.min(100, Math.floor(Math.random() * 15) + 85);
    const efficiencyScore = Math.min(100, Math.floor(Math.random() * 15) + 80);
    
    // 计算自动评分
    const taskCompletionRate = (completedTasks / totalTasks) * 100;
    const requirementCompletionRate = (completedRequirements / totalRequirements) * 100;
    const bugFixRate = (fixedBugs / totalBugs) * 100;
    
    const autoScore = Math.round(
      (taskCompletionRate * 0.3) + 
      (requirementCompletionRate * 0.3) + 
      (bugFixRate * 0.2) + 
      (onTimeRate * 0.1) + 
      (qualityScore * 0.05) + 
      (efficiencyScore * 0.05)
    );

    return {
      completedTasks,
      totalTasks,
      completedRequirements,
      totalRequirements,
      fixedBugs,
      totalBugs,
      onTimeRate,
      qualityScore,
      efficiencyScore,
      autoScore,
      evaluationProcess: [
        {
          step: '任务完成率评估',
          description: `完成${completedTasks}/${totalTasks}个任务，完成率${taskCompletionRate.toFixed(1)}%`,
          score: Math.round(taskCompletionRate),
          timestamp: `${periodName}初`
        },
        {
          step: '需求完成率评估',
          description: `完成${completedRequirements}/${totalRequirements}个需求，完成率${requirementCompletionRate.toFixed(1)}%`,
          score: Math.round(requirementCompletionRate),
          timestamp: `${periodName}中`
        },
        {
          step: 'Bug修复率评估',
          description: `修复${fixedBugs}/${totalBugs}个Bug，修复率${bugFixRate.toFixed(1)}%`,
          score: Math.round(bugFixRate),
          timestamp: `${periodName}末`
        },
        {
          step: '按时完成率评估',
          description: `按时完成率${onTimeRate}%，质量评分${qualityScore}分`,
          score: Math.round((onTimeRate + qualityScore) / 2),
          timestamp: `${periodName}末`
        }
      ]
    };
  };

  const [performanceEvaluations, setPerformanceEvaluations] = useState<PerformanceEvaluation[]>([
    {
      id: '1',
      period: 'month',
      periodName: '2024年1月',
      finalScore: 86.5,
      maxScore: 100,
      averageScore: 86.5,
      rank: 3,
      totalParticipants: 25,
      createdAt: '2024-02-01',
      evaluators: [
        {
          id: 'eval-1',
          name: '项目经理',
          role: '直属上级',
          score: 85,
          comment: '工作态度积极，完成任务质量较高。',
          evaluatedAt: '2024-01-31'
        },
        {
          id: 'eval-2',
          name: '技术总监',
          role: '部门负责人',
          score: 88,
          comment: '技术能力突出，团队协作良好。',
          evaluatedAt: '2024-01-31'
        },
        {
          id: 'eval-3',
          name: '产品经理',
          role: '跨部门协作',
          score: 87,
          comment: '需求理解准确，沟通顺畅。',
          evaluatedAt: '2024-01-31'
        }
      ],
      breakdown: {
        quality: 90,
        efficiency: 80,
        collaboration: 85,
        innovation: 75,
        kpi: 90,
        assessment: 85,
        feedback: 86,
        contribution: 87
      },
      autoEvaluation: calculateAutoEvaluation('2024年1月')
    },
    {
      id: '2',
      period: 'month',
      periodName: '2023年12月',
      finalScore: 89.2,
      maxScore: 100,
      averageScore: 89.2,
      rank: 2,
      totalParticipants: 24,
      createdAt: '2024-01-01',
      evaluators: [
        {
          id: 'eval-4',
          name: '项目经理',
          role: '直属上级',
          score: 90,
          comment: '本月表现优秀，超额完成任务。',
          evaluatedAt: '2023-12-31'
        },
        {
          id: 'eval-5',
          name: '技术总监',
          role: '部门负责人',
          score: 88,
          comment: '技术贡献突出，团队协作良好。',
          evaluatedAt: '2023-12-31'
        }
      ],
      breakdown: {
        quality: 92,
        efficiency: 88,
        collaboration: 87,
        innovation: 85,
        kpi: 90,
        assessment: 88,
        feedback: 89,
        contribution: 90
      },
      autoEvaluation: calculateAutoEvaluation('2023年12月')
    },
    {
      id: '3',
      period: 'quarter',
      periodName: '2023年第四季度',
      finalScore: 87.8,
      maxScore: 100,
      averageScore: 87.8,
      rank: 5,
      totalParticipants: 80,
      createdAt: '2024-01-15',
      evaluators: [
        {
          id: 'eval-6',
          name: '部门总监',
          role: '部门负责人',
          score: 88,
          comment: '季度整体表现稳定，有进步空间。',
          evaluatedAt: '2024-01-10'
        }
      ],
      breakdown: {
        quality: 88,
        efficiency: 85,
        collaboration: 86,
        innovation: 82,
        kpi: 90,
        assessment: 87,
        feedback: 88,
        contribution: 86
      },
      autoEvaluation: calculateAutoEvaluation('2023年第四季度')
    }
  ]);

  // 当前月份是否已进行绩效考核
  const [currentMonthEvaluated, setCurrentMonthEvaluated] = useState<boolean>(false);
  const [currentMonth, setCurrentMonth] = useState<string>('2024年2月');
  
  // 抽屉状态
  const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
  const [selectedEvaluation, setSelectedEvaluation] = useState<PerformanceEvaluation | null>(null);

  const handleTodoAction = (item: TodoItem, action: 'start' | 'complete' | 'view') => {
    switch (action) {
      case 'start':
        setTodoItems(prev => prev.map(todo => 
          todo.id === item.id ? { ...todo, status: 'in-progress' } : todo
        ));
        toast.success(`开始处理：${item.title}`);
        break;
      case 'complete':
        setTodoItems(prev => prev.map(todo => 
          todo.id === item.id ? { ...todo, status: 'completed' } : todo
        ));
        toast.success(`完成任务：${item.title}`);
        break;
      case 'view':
        // 打开详情抽屉
        setSelectedItem(item as DetailItem);
        setIsDrawerOpen(true);
        break;
    }
  };

  // 处理抽屉关闭
  const handleDrawerClose = () => {
    setIsDrawerOpen(false);
    setSelectedItem(null);
  };

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case 'urgent': return 'bg-red-100 text-red-800 border-red-200';
      case 'high': return 'bg-orange-100 text-orange-800 border-orange-200';
      case 'medium': return 'bg-yellow-100 text-yellow-800 border-yellow-200';
      case 'low': return 'bg-green-100 text-green-800 border-green-200';
      default: return 'bg-gray-100 text-gray-800 border-gray-200';
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'completed': return 'bg-green-100 text-green-800';
      case 'in-progress': return 'bg-blue-100 text-blue-800';
      case 'pending': return 'bg-gray-100 text-gray-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  const getScoreColor = (score: number) => {
    if (score >= 90) return 'text-green-600';
    if (score >= 80) return 'text-blue-600';
    if (score >= 70) return 'text-yellow-600';
    return 'text-red-600';
  };

  // 获取筛选后的待办事项
  const getFilteredTodoItems = () => {
    if (todoFilter === 'all') return todoItems;
    return todoItems.filter(item => item.type === todoFilter);
  };

  // 按类型分组待办事项
  const getTodoItemsByType = () => {
    const filteredItems = getFilteredTodoItems();
    return {
      requirement: filteredItems.filter(item => item.type === 'requirement'),
      task: filteredItems.filter(item => item.type === 'task'),
      bug: filteredItems.filter(item => item.type === 'bug')
    };
  };

  // 获取类型图标
  const getTypeIcon = (type: string) => {
    switch (type) {
      case 'requirement': return 'fa-file-lines text-blue-500';
      case 'task': return 'fa-list-check text-green-500';
      case 'bug': return 'fa-bug text-red-500';
      default: return 'fa-circle text-gray-500';
    }
  };

  // 获取类型中文名称
  const getTypeName = (type: string): string => {
    switch (type) {
      case 'requirement': return '需求';
      case 'task': return '任务';
      case 'bug': return '缺陷';
      case 'article': return '文章';
      default: return '未知';
    }
  };

  // 获取评论类型图标
  const getCommentTypeIcon = (type: string): string => {
    switch (type) {
      case 'requirement': return 'fa-list-check';
      case 'task': return 'fa-tasks';
      case 'bug': return 'fa-bug';
      case 'article': return 'fa-file-lines';
      default: return 'fa-comment';
    }
  };

  // 获取评论状态颜色
  const getCommentStatusColor = (status?: string): string => {
    switch (status) {
      case 'pending': return 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200';
      case 'resolved': return 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200';
      default: return 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300';
    }
  };

  // 获取@我的评论
  const getMentionedComments = () => {
    return mentionComments.filter(comment => comment.mentioned);
  };

  // 处理评论操作
  const handleCommentAction = (comment: MentionComment, action: 'view' | 'resolve' | 'like') => {
    switch (action) {
      case 'view':
        // 跳转到对应目标页面
        toast.success(`查看${getTypeName(comment.type)}：${comment.targetTitle}`);
        break;
      case 'resolve':
        if (comment.status === 'pending') {
          setMentionComments(prev => prev.map(c => 
            c.id === comment.id ? { ...c, status: 'resolved' } : c
          ));
          toast.success('已标记为已处理');
        }
        break;
      case 'like':
        setMentionComments(prev => prev.map(c => 
          c.id === comment.id ? { ...c, likes: c.likes + 1 } : c
        ));
        break;
    }
  };

  return (
    <div className="min-h-screen bg-white dark:bg-gray-900 ">
      <div className="max-w-7xl mx-auto pt-0 pl-0">
        {/* 页面标题 */}
        <motion.div 
          className="mb-8"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-2">个人工作台</h1>
          <p className="text-gray-600 dark:text-gray-400">一站式工作管理平台，助您高效完成工作</p>
        </motion.div>

        {/* 统计卡片 */}
        <motion.div 
          className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.1 }}
        >
          <motion.div 
            className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700"
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.4, delay: 0.2 }}
          >
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">待办事项</p>
                <p className="text-2xl font-bold text-gray-800 dark:text-white">
                  {todoItems.filter(item => item.status !== 'completed').length}
                </p>
              </div>
              <div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
                <i className="fa-solid fa-list-check text-blue-600 dark:text-blue-400 text-xl"></i>
              </div>
            </div>
          </motion.div>

          <motion.div 
            className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700"
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.4, delay: 0.3 }}
          >
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">@我的评论</p>
                <p className="text-2xl font-bold text-gray-800 dark:text-white">{getMentionedComments().length}</p>
              </div>
              <div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center">
                <i className="fa-solid fa-at text-green-600 dark:text-green-400 text-xl"></i>
              </div>
            </div>
          </motion.div>

          <motion.div 
            className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700"
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.4, delay: 0.4 }}
          >
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">绩效考核</p>
                <p className="text-2xl font-bold text-gray-800 dark:text-white">
                  {performanceEvaluations[0]?.finalScore || 0}
                </p>
              </div>
              <div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
                <i className="fa-solid fa-star text-purple-600 dark:text-purple-400 text-xl"></i>
              </div>
            </div>
          </motion.div>

          <motion.div 
            className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-200 dark:border-gray-700"
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.4, delay: 0.5 }}
          >
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500 dark:text-gray-400">绩效排名</p>
                <p className="text-2xl font-bold text-gray-800 dark:text-white">
                  {performanceEvaluations[0]?.rank || 0}/{performanceEvaluations[0]?.totalParticipants || 0}
                </p>
              </div>
              <div className="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center">
                <i className="fa-solid fa-trophy text-orange-600 dark:text-orange-400 text-xl"></i>
              </div>
            </div>
          </motion.div>
        </motion.div>

        {/* 标签页 */}
        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
          <div className="border-b border-gray-200 dark:border-gray-700">
            <nav className="flex space-x-8 px-6">
              {[
                { key: 'todo', label: '待办事项', icon: 'fa-list-check' },
                { key: 'knowledge', label: '我的评论', icon: 'fa-at' },
                { key: 'performance', label: '绩效考核', icon: 'fa-star' }
              ].map((tab) => (
                <button
                  key={tab.key}
                  className={`flex items-center space-x-2 py-4 px-2 border-b-2 font-medium text-sm ${
                    activeTab === tab.key
                      ? 'border-blue-500 text-blue-600 dark:text-blue-400'
                      : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
                  }`}
                  onClick={() => setActiveTab(tab.key as any)}
                >
                  <i className={`fa-solid ${tab.icon}`}></i>
                  <span>{tab.label}</span>
                </button>
              ))}
            </nav>
          </div>

          <div className="p-6">
            {/* 待办事项 */}
            {activeTab === 'todo' && (
              <motion.div 
                className="space-y-4"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.4 }}
              >
                <div className="flex justify-between items-center mb-4">
                  <h3 className="text-lg font-semibold text-gray-800 dark:text-white">我的待办</h3>
                  <div className="flex space-x-2">
                    {/* 视图切换 */}
                    <div className="flex bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
                      <button 
                        onClick={() => setTodoViewMode('kanban')}
                        className={`px-3 py-1 text-sm rounded-md transition-colors ${
                          todoViewMode === 'kanban' 
                            ? 'bg-white dark:bg-gray-600 text-blue-600 dark:text-blue-400 shadow-sm' 
                            : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
                        }`}
                      >
                        <i className="fa-solid fa-table-cells mr-1"></i>看板
                      </button>
                      <button 
                        onClick={() => setTodoViewMode('list')}
                        className={`px-3 py-1 text-sm rounded-md transition-colors ${
                          todoViewMode === 'list' 
                            ? 'bg-white dark:bg-gray-600 text-blue-600 dark:text-blue-400 shadow-sm' 
                            : 'text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
                        }`}
                      >
                        <i className="fa-solid fa-list mr-1"></i>列表
                      </button>
                    </div>
                    
                    {/* 筛选按钮 */}
                    <div className="flex space-x-1">
                      {[
                        { key: 'all', label: '全部' },
                        { key: 'requirement', label: '需求' },
                        { key: 'task', label: '任务' },
                        { key: 'bug', label: '缺陷' }
                      ].map((filter) => (
                        <button
                          key={filter.key}
                          onClick={() => setTodoFilter(filter.key as any)}
                          className={`px-3 py-1 text-sm rounded-lg transition-colors ${
                            todoFilter === filter.key
                              ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
                              : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
                          }`}
                        >
                          {filter.label}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
                
                {/* 看板视图 */}
                {todoViewMode === 'kanban' && (
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    {Object.entries(getTodoItemsByType()).map(([type, items]) => (
                      <motion.div 
                        key={type}
                        className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600"
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.3 }}
                      >
                        <div className="flex items-center space-x-2 mb-4">
                          <i className={`fa-solid ${getTypeIcon(type)} text-lg`}></i>
                          <h4 className="font-semibold text-gray-800 dark:text-white">{getTypeName(type)}</h4>
                          <span className="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded-full">
                            {items.length}项
                          </span>
                        </div>
                        
                        <div className="space-y-3">
                          {items.map((item, index) => (
                            <motion.div 
                              key={item.id}
                              className="bg-white dark:bg-gray-600 rounded-lg p-3 border border-gray-200 dark:border-gray-500 shadow-sm"
                              initial={{ opacity: 0, scale: 0.95 }}
                              animate={{ opacity: 1, scale: 1 }}
                              transition={{ duration: 0.2, delay: index * 0.05 }}
                            >
                              <div className="flex justify-between items-start mb-2">
                                <div className="flex items-center space-x-2">
                                  <span className={`px-2 py-1 text-xs font-medium rounded-full border ${getPriorityColor(item.priority)}`}>
                                    {item.priority === 'urgent' ? '紧急' : item.priority === 'high' ? '高' : item.priority === 'medium' ? '中' : '低'}
                                  </span>
                                  <span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(item.status)}`}>
                                    {item.status === 'pending' ? '待处理' : item.status === 'in-progress' ? '进行中' : '已完成'}
                                  </span>
                                </div>
                                <span className="text-xs text-gray-500 dark:text-gray-400">{item.createdAt}</span>
                              </div>
                              
                              <h5 className="font-medium text-gray-800 dark:text-white mb-2 text-sm">{item.title}</h5>
                              
                              <div className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
                                <div>项目：{item.project}</div>
                                <div>负责人：{item.assignee}</div>
                                {item.deadline && <div>截止：{item.deadline}</div>}
                              </div>
                              
                              <div className="flex space-x-2 mt-3">
                                {item.status === 'pending' && (
                                  <button 
                                    onClick={() => handleTodoAction(item, 'start')}
                                    className="px-2 py-1 bg-blue-500 hover:bg-blue-600 text-white rounded text-xs flex-1"
                                  >
                                    开始
                                  </button>
                                )}
                                {item.status === 'in-progress' && (
                                  <button 
                                    onClick={() => handleTodoAction(item, 'complete')}
                                    className="px-2 py-1 bg-green-500 hover:bg-green-600 text-white rounded text-xs flex-1"
                                  >
                                    完成
                                  </button>
                                )}
                                <button 
                                  onClick={() => handleTodoAction(item, 'view')}
                                  className="px-2 py-1 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 rounded text-xs flex-1"
                                >
                                  详情
                                </button>
                              </div>
                            </motion.div>
                          ))}
                          
                          {items.length === 0 && (
                            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
                              <i className="fa-solid fa-inbox text-2xl mb-2"></i>
                              <p className="text-sm">暂无{getTypeName(type)}</p>
                            </div>
                          )}
                        </div>
                      </motion.div>
                    ))}
                  </div>
                )}
                
                {/* 列表视图 */}
                {todoViewMode === 'list' && (
                  <div className="space-y-3">
                    {getFilteredTodoItems().map((item, index) => (
                      <motion.div 
                        key={item.id} 
                        className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600"
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.3, delay: index * 0.1 }}
                      >
                        <div className="flex justify-between items-start mb-3">
                          <div className="flex items-center space-x-3">
                            <i className={`fa-solid ${getTypeIcon(item.type)}`}></i>
                            <span className={`px-2 py-1 text-xs font-medium rounded-full border ${getPriorityColor(item.priority)}`}>
                              {item.priority === 'urgent' ? '紧急' : item.priority === 'high' ? '高' : item.priority === 'medium' ? '中' : '低'}
                            </span>
                            <span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(item.status)}`}>
                              {item.status === 'pending' ? '待处理' : item.status === 'in-progress' ? '进行中' : '已完成'}
                            </span>
                          </div>
                          <span className="text-xs text-gray-500 dark:text-gray-400">{item.createdAt}</span>
                        </div>
                        
                        <h4 className="font-medium text-gray-800 dark:text-white mb-2">{item.title}</h4>
                        
                        <div className="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
                          <div className="flex items-center space-x-4">
                            <span>项目：{item.project}</span>
                            <span>负责人：{item.assignee}</span>
                            {item.deadline && <span>截止：{item.deadline}</span>}
                          </div>
                          
                          <div className="flex space-x-2">
                            {item.status === 'pending' && (
                              <button 
                                onClick={() => handleTodoAction(item, 'start')}
                                className="px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white rounded text-xs"
                              >
                                开始处理
                              </button>
                            )}
                            {item.status === 'in-progress' && (
                              <button 
                                onClick={() => handleTodoAction(item, 'complete')}
                                className="px-3 py-1 bg-green-500 hover:bg-green-600 text-white rounded text-xs"
                              >
                                标记完成
                              </button>
                            )}
                            <button 
                              onClick={() => handleTodoAction(item, 'view')}
                              className="px-3 py-1 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 rounded text-xs"
                            >
                              查看详情
                            </button>
                          </div>
                        </div>
                      </motion.div>
                    ))}
                  </div>
                )}
              </motion.div>
            )}

            {/* @我的 */}
            {activeTab === 'knowledge' && (
              <motion.div 
                className="space-y-4"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.4 }}
              >
                <div className="flex justify-between items-center mb-4">
                  <h3 className="text-lg font-semibold text-gray-800 dark:text-white">@我的</h3>
                  <div className="flex space-x-2">
                    <button className="px-3 py-1 text-sm bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-lg">
                      全部
                    </button>
                    <button className="px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
                      需求
                    </button>
                    <button className="px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
                      任务
                    </button>
                    <button className="px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
                      缺陷
                    </button>
                    <button className="px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
                      文章
                    </button>
                  </div>
                </div>
                
                {getMentionedComments().map((comment, index) => (
                  <motion.div 
                    key={comment.id} 
                    className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.3, delay: index * 0.1 }}
                  >
                    <div className="flex justify-between items-start mb-3">
                      <div className="flex items-center space-x-3">
                        <i className={`fa-solid ${getCommentTypeIcon(comment.type)} text-blue-600 dark:text-blue-400`}></i>
                        <h4 className="font-medium text-blue-600 dark:text-blue-400 cursor-pointer hover:underline">
                          {comment.targetTitle}
                        </h4>
                        {comment.status && (
                          <span className={`px-2 py-1 text-xs font-medium rounded-full ${getCommentStatusColor(comment.status)}`}>
                            {comment.status === 'pending' ? '待处理' : '已处理'}
                          </span>
                        )}
                      </div>
                      <span className="text-xs text-gray-500 dark:text-gray-400">{comment.createdAt}</span>
                    </div>
                    
                    <p className="text-gray-700 dark:text-gray-300 mb-3">{comment.content}</p>
                    
                    <div className="flex justify-between items-center text-sm">
                      <div className="flex items-center space-x-4">
                        <span className="text-gray-500 dark:text-gray-400">评论者：{comment.author}</span>
                        <span className="text-gray-500 dark:text-gray-400">类型：{getTypeName(comment.type)}</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <button 
                          onClick={() => handleCommentAction(comment, 'like')}
                          className="text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400"
                        >
                          <i className="fa-solid fa-heart mr-1"></i>
                          {comment.likes}
                        </button>
                        {comment.status === 'pending' && (
                          <button 
                            onClick={() => handleCommentAction(comment, 'resolve')}
                            className="px-3 py-1 bg-green-500 hover:bg-green-600 text-white rounded text-xs"
                          >
                            标记处理
                          </button>
                        )}
                        <button 
                          onClick={() => handleCommentAction(comment, 'view')}
                          className="px-3 py-1 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 rounded text-xs"
                        >
                          查看详情
                        </button>
                      </div>
                    </div>
                  </motion.div>
                ))}
                
                {getMentionedComments().length === 0 && (
                  <motion.div 
                    className="text-center py-12"
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ duration: 0.5 }}
                  >
                    <i className="fa-solid fa-at text-4xl text-gray-300 dark:text-gray-600 mb-4"></i>
                    <p className="text-gray-500 dark:text-gray-400">暂无@我的评论</p>
                  </motion.div>
                )}
              </motion.div>
            )}

            {/* 绩效考核 */}
            {activeTab === 'performance' && (
              <motion.div 
                className="space-y-6"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.4 }}
              >
                <div className="flex justify-between items-center">
                  <h3 className="text-lg font-semibold text-gray-800 dark:text-white">绩效考核记录</h3>
                  <div className="flex items-center space-x-4">
                    <span className="text-sm text-gray-500 dark:text-gray-400">当前月份：{currentMonth}</span>
                    <span className={`px-3 py-1 text-xs font-medium rounded-full ${
                      currentMonthEvaluated 
                        ? 'bg-green-100 text-green-800' 
                        : 'bg-yellow-100 text-yellow-800'
                    }`}>
                      {currentMonthEvaluated ? '已考核' : '未考核'}
                    </span>
                  </div>
                </div>
                
                {/* 当月未考核提示 */}
                {!currentMonthEvaluated && (
                  <motion.div 
                    className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4"
                    initial={{ opacity: 0, scale: 0.95 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.3 }}
                  >
                    <div className="flex items-start space-x-3">
                      <i className="fa-solid fa-exclamation-triangle text-yellow-500 mt-1"></i>
                      <div>
                        <h4 className="font-medium text-yellow-800 dark:text-yellow-200 mb-1">当月绩效考核尚未进行</h4>
                        <p className="text-sm text-yellow-700 dark:text-yellow-300">
                          {currentMonth}的绩效考核尚未开始或正在进行中。您可以在考核开始后查看详细评分。
                        </p>
                        <div className="mt-3 flex space-x-2">
                          <button 
                            className="px-3 py-1 bg-yellow-500 hover:bg-yellow-600 text-white text-xs rounded"
                            onClick={() => setCurrentMonthEvaluated(true)}
                          >
                            模拟考核完成
                          </button>
                          <button 
                            className="px-3 py-1 border border-yellow-300 text-yellow-700 hover:bg-yellow-100 text-xs rounded"
                            onClick={() => toast.info('已提醒管理员开始考核流程')}
                          >
                            提醒管理员
                          </button>
                        </div>
                      </div>
                    </div>
                  </motion.div>
                )}
                
                {/* 历史考核记录 */}
                <div className="mb-4">
                  <h4 className="font-medium text-gray-800 dark:text-white mb-3">历史考核记录</h4>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {performanceEvaluations.map((evaluation, index) => (
                      <motion.div 
                        key={evaluation.id}
                        className="bg-white dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600 cursor-pointer hover:shadow-md transition-shadow"
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.3, delay: index * 0.1 }}
                        onClick={() => {
                          // 打开抽屉显示考核明细
                          setSelectedEvaluation(evaluation);
                          setDrawerOpen(true);
                        }}
                      >
                        <div className="flex justify-between items-start mb-2">
                          <span className="text-sm font-medium text-gray-600 dark:text-gray-400">
                            {evaluation.period === 'month' ? '月度' : evaluation.period === 'quarter' ? '季度' : '年度'}考核
                          </span>
                          <span className={`px-2 py-1 text-xs rounded-full ${
                            evaluation.finalScore >= 90 ? 'bg-green-100 text-green-800' :
                            evaluation.finalScore >= 80 ? 'bg-blue-100 text-blue-800' :
                            evaluation.finalScore >= 70 ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800'
                          }`}>
                            {evaluation.finalScore >= 90 ? '优秀' : evaluation.finalScore >= 80 ? '良好' : evaluation.finalScore >= 70 ? '合格' : '待改进'}
                          </span>
                        </div>
                        <h5 className="font-semibold text-gray-800 dark:text-white mb-2">{evaluation.periodName}</h5>
                        {/* 自动考评信息 */}
                        {evaluation.autoEvaluation && (
                          <div className="mb-2 p-2 bg-gray-50 dark:bg-gray-600 rounded text-xs">
                            <div className="flex justify-between mb-1">
                              <span className="text-gray-600 dark:text-gray-400">任务</span>
                              <span className="font-medium">
                                {evaluation.autoEvaluation.completedTasks}/{evaluation.autoEvaluation.totalTasks}
                              </span>
                            </div>
                            <div className="flex justify-between mb-1">
                              <span className="text-gray-600 dark:text-gray-400">需求</span>
                              <span className="font-medium">
                                {evaluation.autoEvaluation.completedRequirements}/{evaluation.autoEvaluation.totalRequirements}
                              </span>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-gray-600 dark:text-gray-400">Bug</span>
                              <span className="font-medium">
                                {evaluation.autoEvaluation.fixedBugs}/{evaluation.autoEvaluation.totalBugs}
                              </span>
                            </div>
                          </div>
                        )}
                        
                        <div className="flex justify-between items-center">
                          <div className={`text-2xl font-bold ${getScoreColor(evaluation.finalScore)}`}>
                            {evaluation.finalScore}
                          </div>
                          <div className="text-right">
                            <div className="text-sm text-gray-600 dark:text-gray-400">
                              排名 {evaluation.rank}/{evaluation.totalParticipants}
                            </div>
                            <div className="text-xs text-gray-500 dark:text-gray-500">
                              {evaluation.createdAt}
                            </div>
                          </div>
                        </div>
                      </motion.div>
                    ))}
                  </div>
                </div>
                

              </motion.div>
            )}
          </div>
        </div>
      </div>

      {/* 考核明细抽屉 */}
      <div className={`fixed inset-0 z-50 transition-opacity duration-300 ${drawerOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
        <div className="absolute inset-0 bg-black bg-opacity-50" onClick={() => setDrawerOpen(false)}></div>
        <div className={`absolute right-0 top-0 h-full w-full max-w-md bg-white dark:bg-gray-800 shadow-xl transform transition-transform duration-300 ${drawerOpen ? 'translate-x-0' : 'translate-x-full'}`}>
          {selectedEvaluation && (
            <div className="h-full flex flex-col">
              {/* 抽屉头部 */}
              <div className="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-600">
                <h3 className="text-lg font-semibold text-gray-800 dark:text-white">
                  {selectedEvaluation.periodName}考核明细
                </h3>
                <button 
                  onClick={() => setDrawerOpen(false)}
                  className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full"
                >
                  <svg className="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>

              {/* 抽屉内容 */}
              <div className="flex-1 overflow-y-auto p-4">
                {/* 考核基本信息 */}
                <div className="flex justify-between items-center mb-6">
                  <div>
                    <h4 className="font-semibold text-gray-800 dark:text-white">{selectedEvaluation.periodName}绩效考核</h4>
                    <p className="text-sm text-gray-500 dark:text-gray-400">
                      参与人数：{selectedEvaluation.totalParticipants}人 | 排名：第{selectedEvaluation.rank}名
                    </p>
                  </div>
                  <div className="text-center">
                    <div className={`text-3xl font-bold ${getScoreColor(selectedEvaluation.finalScore)}`}>
                      {selectedEvaluation.finalScore}分
                    </div>
                    <div className="text-sm text-gray-500 dark:text-gray-400">
                      平均分：{selectedEvaluation.averageScore}分 | 满分{selectedEvaluation.maxScore}
                    </div>
                  </div>
                </div>
                
                {/* 自动考评过程 */}
                {selectedEvaluation.autoEvaluation && (
                  <div className="mb-6">
                    <h5 className="font-medium text-gray-800 dark:text-white mb-4">
                      自动考评过程 <span className="text-sm text-blue-600 ml-2">基于任务、需求、Bug完成情况</span>
                    </h5>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
                      <div className="bg-gray-50 dark:bg-gray-600 rounded-lg p-4 text-center">
                        <div className="text-2xl font-bold text-blue-600">{selectedEvaluation.autoEvaluation.completedTasks}/{selectedEvaluation.autoEvaluation.totalTasks}</div>
                        <div className="text-sm text-gray-600 dark:text-gray-400">任务完成</div>
                        <div className="text-xs text-green-600">
                          {((selectedEvaluation.autoEvaluation.completedTasks / selectedEvaluation.autoEvaluation.totalTasks) * 100).toFixed(1)}%
                        </div>
                      </div>
                      <div className="bg-gray-50 dark:bg-gray-600 rounded-lg p-4 text-center">
                        <div className="text-2xl font-bold text-green-600">{selectedEvaluation.autoEvaluation.completedRequirements}/{selectedEvaluation.autoEvaluation.totalRequirements}</div>
                        <div className="text-sm text-gray-600 dark:text-gray-400">需求完成</div>
                        <div className="text-xs text-green-600">
                          {((selectedEvaluation.autoEvaluation.completedRequirements / selectedEvaluation.autoEvaluation.totalRequirements) * 100).toFixed(1)}%
                        </div>
                      </div>
                      <div className="bg-gray-50 dark:bg-gray-600 rounded-lg p-4 text-center">
                        <div className="text-2xl font-bold text-purple-600">{selectedEvaluation.autoEvaluation.fixedBugs}/{selectedEvaluation.autoEvaluation.totalBugs}</div>
                        <div className="text-sm text-gray-600 dark:text-gray-400">Bug修复</div>
                        <div className="text-xs text-green-600">
                          {((selectedEvaluation.autoEvaluation.fixedBugs / selectedEvaluation.autoEvaluation.totalBugs) * 100).toFixed(1)}%
                        </div>
                      </div>
                      <div className="bg-gray-50 dark:bg-gray-600 rounded-lg p-4 text-center">
                        <div className="text-2xl font-bold text-orange-600">{selectedEvaluation.autoEvaluation.autoScore}分</div>
                        <div className="text-sm text-gray-600 dark:text-gray-400">自动评分</div>
                        <div className="text-xs text-blue-600">系统评估</div>
                      </div>
                    </div>
                    
                    {/* 考评步骤 */}
                    <div className="space-y-3">
                      <h6 className="font-medium text-gray-700 dark:text-gray-300">考评步骤详情：</h6>
                      {selectedEvaluation.autoEvaluation.evaluationProcess.map((step, stepIndex) => (
                        <div key={stepIndex} className="bg-gray-50 dark:bg-gray-600 rounded-lg p-3 border-l-4 border-blue-500">
                          <div className="flex justify-between items-center">
                            <div>
                              <span className="font-medium text-gray-800 dark:text-white">{step.step}</span>
                              <span className="text-xs text-gray-500 dark:text-gray-400 ml-2">{step.timestamp}</span>
                            </div>
                            <span className={`px-2 py-1 text-xs rounded-full ${
                              step.score >= 90 ? 'bg-green-100 text-green-800' :
                              step.score >= 80 ? 'bg-blue-100 text-blue-800' :
                              step.score >= 70 ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800'
                            }`}>
                              {step.score}分
                            </span>
                          </div>
                          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">{step.description}</p>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
                
                {/* 考核维度评分 */}
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                  {Object.entries(selectedEvaluation.breakdown).map(([key, score]) => (
                    <div key={key} className="text-center">
                      <div className={`text-lg font-semibold ${getScoreColor(score)}`}>{score}</div>
                      <div className="text-xs text-gray-500 dark:text-gray-400 capitalize">
                        {key === 'quality' ? '工作质量' : 
                         key === 'efficiency' ? '工作效率' : 
                         key === 'collaboration' ? '团队协作' : 
                         key === 'innovation' ? '创新协作' :
                         key === 'kpi' ? 'KPI指标' : 
                         key === 'assessment' ? '能力评估' : 
                         key === 'feedback' ? '反馈评价' : '贡献度'}
                      </div>
                    </div>
                  ))}
                </div>
                
                {/* 管理人员评分详情 */}
                <div className="mb-6">
                  <h5 className="font-medium text-gray-800 dark:text-white mb-4">管理人员评分详情</h5>
                  <div className="space-y-4">
                    {selectedEvaluation.evaluators.map((evaluator, evalIndex) => (
                      <div key={evaluator.id} className="bg-gray-50 dark:bg-gray-600 rounded-lg p-4 border border-gray-200 dark:border-gray-500">
                        <div className="flex justify-between items-center mb-3">
                          <div>
                            <span className="font-medium text-gray-800 dark:text-white">{evaluator.name}</span>
                            <span className="text-sm text-gray-500 dark:text-gray-400 ml-2">({evaluator.role})</span>
                          </div>
                          <div className="text-right">
                            <div className={`text-lg font-bold ${getScoreColor(evaluator.score)}`}>
                              {evaluator.score}分
                            </div>
                            <div className="text-xs text-gray-500 dark:text-gray-400">
                              {evaluator.evaluatedAt}
                            </div>
                          </div>
                        </div>
                        <p className="text-sm text-gray-700 dark:text-gray-300">{evaluator.comment}</p>
                      </div>
                    ))}
                  </div>
                </div>
                
                {/* 最终评价 */}
                <div className="bg-gray-50 dark:bg-gray-600 rounded p-4 border border-gray-200 dark:border-gray-500">
                  <h5 className="font-medium text-gray-800 dark:text-white mb-2">最终评价</h5>
                  <p className="text-sm text-gray-700 dark:text-gray-300">
                    本月绩效考核由{selectedEvaluation.evaluators.length}位管理人员共同评分，最终得分取平均分。
                    整体表现良好，在{selectedEvaluation.evaluators.map(e => e.name).join('、')}的评价中均获得较高分数。
                  </p>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
      
      {/* 详情抽屉组件 */}
      <DetailDrawer
        isOpen={isDrawerOpen}
        onClose={handleDrawerClose}
        item={selectedItem}
      />
    </div>
  );
}

export default Workbench;